import React, { useEffect } from "react";
import * as THREE from "three";

export default () => {
  useEffect(() => {
    var scene = new THREE.Scene();
    var camera = new THREE.PerspectiveCamera(
      45,
      window.innerWidth / window.innerHeight,
      0.1,
      1000
    );
    var renderer = new THREE.WebGLRenderer();
    renderer.setClearColor(new THREE.Color(0x000000)); //背景色
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.shadowMap.enabled = true; // 显示阴影
    // 创建平面
    var planeGeometry = new THREE.PlaneGeometry(60, 20, 1, 1);
    var planeMaterial = new THREE.MeshLambertMaterial({ color: 0xffffff });
    var plane = new THREE.Mesh(planeGeometry, planeMaterial);
    plane.receiveShadow = true;
    plane.rotation.x = -0.5 * Math.PI;
    plane.position.x = 15;
    plane.position.y = 0;
    plane.position.z = 0;
    plane.name = 'plane';
    scene.add(plane);
    camera.position.x = -30;
    camera.position.y = 40;
    camera.position.z = 30;
    camera.lookAt(scene.position);
    var ambientLight = new THREE.AmbientLight(0x353535); // 环境光
    scene.add(ambientLight);
    // 设置灯光
    var spotLight = new THREE.SpotLight(0xffffff); // 聚光
    spotLight.position.set(-10, 20, -5);
    spotLight.castShadow = true;
    scene.add(spotLight);
    // 创建立方体
    var cubeGeometry = new THREE.BoxGeometry(4, 4, 4); // 几何体
    var cubeMaterial = new THREE.MeshLambertMaterial({ color: 0xff0000 }); // 材质
    var cube = new THREE.Mesh(cubeGeometry, cubeMaterial); // 网格
    cube.position.x = -4;
    cube.position.y = 3;
    cube.position.z = 0;
    cube.name = 'cube';
    cube.castShadow = true;
    // 添加立方体到场景中
    scene.add(cube);
    // 创建球体
    var sphereGeometry = new THREE.SphereGeometry(4, 20, 20);
    var sphereMaterial = new THREE.MeshLambertMaterial({ color: 0x7777ff });
    var sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
    sphere.position.x = 20;
    sphere.position.y = 0;
    sphere.position.z = 2;
    sphere.name = 'sphere';
    sphere.castShadow = true;
    // 添加球体到场景中
    scene.add(sphere);
    // 坐标轴
    var axesHelper = new THREE.AxesHelper(150);
    scene.add(axesHelper);
    document.body.appendChild(renderer.domElement);
    renderer.render(scene, camera);
    let step = 0;
    function render() {
      // 立方体能同时围绕x、y、z轴旋转
      cube.rotation.x += 0.02;
      cube.rotation.y += 0.02;
      cube.rotation.z += 0.02;
      step += 0.04;
      // 球体在x轴方向来回移动，同时在y轴方向做曲线运动
      sphere.position.x = 20 + 10 * Math.cos(step);
      sphere.position.y = 2 + 10 * Math.abs(Math.sin(step));
      requestAnimationFrame(render);
      renderer.render(scene, camera);
    }
    window.addEventListener('click', (event) => {
        const raycaster = new THREE.Raycaster();
        const pointer = new THREE.Vector2();
        // 将鼠标位置归一化为设备坐标。x 和 y 方向的取值范围是 (-1 to +1)
        pointer.x = ( event.clientX / window.innerWidth ) * 2 - 1;
        pointer.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
        // 通过摄像机和鼠标位置更新射线
	    raycaster.setFromCamera( pointer, camera );
        const intersects = raycaster.intersectObjects( scene.children, true )
        if (intersects.length > 0) {
            const clickedObject = intersects[0].object;
            //通过点击到该模型用名字匹配
            if (clickedObject.name === 'plane') {
                console.log("点击了plane");
            }
            if (clickedObject.name === 'cube') {
                console.log("点击了cube");
            }
            if (clickedObject.name === 'sphere') {
                console.log("点击了sphere");
            }
        }
    }, false)
    render();
  }, []);
  return <div>342342</div>;
};
